<template>
    <view class="container">
        <view class="content">
            <view class="logo">
                <image src="/static/images/logo.jpg" />
            </view>
            <view class="qrcode">
                <image :src="qrcode" />
            </view>
            <view class="code mt-20"> {{ code }} </view>
            <view class="text">会员码还有{{ second }}秒自动更新</view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { useRequest } from 'alova';
import { userQrcode } from '@/services/api/auth';
onShow(() => {
    getInit();
});
const qrcode = ref('');
const code = ref('');
const second = ref(60);
const { send: getUserQrcode } = useRequest(userQrcode, { immediate: false });
const getInit = () => {
    getUserQrcode().then((res) => {
        qrcode.value = res.image;
        code.value = res.code;
        second.value = 60;
        countdown();
    });
};
const countdown = () => {
    const interval = setInterval(function () {
        if (second.value === 0) {
            clearInterval(interval);
            console.log('倒计时结束');
            getInit();
        } else {
            second.value--;
        }
    }, 1000);
};
</script>
<style lang="scss" scoped>
.content {
    color: #000000;
    padding: 50rpx;
    padding-top: 100rpx;
    text-align: center;
    .logo {
        width: 136rpx;
        height: 136rpx;
        margin: 0 auto;
        image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .qrcode {
        width: 320rpx;
        height: 320rpx;
        margin: 0 auto;
        margin-top: 120rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .code {
        font-size: 32rpx;
    }
    .text {
        margin-top: 30rpx;
        font-size: 24rpx;
        color: #aaa;
    }
}
</style>
